<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>get的基本使用</title>
    <style>
        #frm input {
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <h1>用户登录界面</h1>
    <form id="frm" action="">
        <input id="acc" type="text" placeholder="账号"><br />
        <input id="psw" type="password" placeholder="密码"><br />
        <button id="btn">确认提交(5)</button>
    </form>
    <script>
        const oacc = document.getElementById("acc")
        const psw = document.getElementById("psw")
        const btn = document.getElementById("btn")
        const frm = document.getElementById("frm")
        let id = null

        //没循环一次就减小1,直到减到1直接变成提交
        // function confirm(i) {
        //     id = setInterval(() => {
        //         console.log(i);
        //         btn.innerHTML = `确认提交(${i})`
        //         if (i === 0) {
        //             btn.innerHTML = "确认提交"
        //             clearInterval(id)
        //         }
        //         i--
        //     }, 1000);
        // }

        // confirm(4)

        frm.onsubmit = function () {
            //请求参数
            const logInfor1 = oacc.value
            const logInfor2 = psw.value
            // ajax请求数据
            const xhr = new XMLHttpRequest()
            xhr.open("GET", `/login?logInfor1=${logInfor1}&logInfor2=${logInfor2}&_=${Date.now()}`, true)
            //可以写post请求体
            xhr.send()

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && (xhr.static >= 200 && xhr.static <= 299)) {
                    console.log(xhr.responseText);
                }
            }
            return false
        }




    </script>
</body>

</html>